<template>
	<div class="container">
		<!-- 路径导航区域 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>课程管理</el-breadcrumb-item>
			<el-breadcrumb-item>课程评价管理</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 搜索区域 -->
		<el-row>
			<el-form :inline="true">
				<el-form-item label="评价内容">
					<el-input v-model="queryInfo.evaluateContent" @clear="queryList" placeholder="请输
入评价内容"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="queryList">搜索</el-button>
					<!-- <el-button type="danger">批量删除</el-button> -->
				</el-form-item>
			</el-form>
		</el-row>
		<!-- 表格区域 -->
		<el-table :data="courseEvaluationList" border style="width: 100%">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column prop="courseEvaluationId" label="ID"></el-table-column>
			<el-table-column prop="userId" label="评论人">
				<template slot-scope="scope">
					{{users[scope.row.userId]}}
				</template>
			</el-table-column>
			<el-table-column prop="courseId" label="评论课程">
				<template slot-scope="scope">
					{{coursees[scope.row.courseId]}}
				</template>
			</el-table-column>
			<el-table-column prop="evaluateContent" label="评价内容">
			</el-table-column>
			<el-table-column prop="level" label="评价星级">  
			        <template slot-scope="scope">  
			          <!-- 使用 Element UI 自带的图标 -->  
			          <i  v-for="n in parseInt(scope.row.level,10)"  
						  :key="n"  
						  class="el-icon-star-on"  
						  style="margin-left: 4px; font-size: 18px; color: gold;"></i>  
			          <!-- 显示评价星级 -->  
			          <!-- {{ scope.row.level }}  -->
			        </template>  
			</el-table-column>  
			</el-table-column>
			<el-table-column prop="evaluateTime" label="评价时间">
			</el-table-column>
			<!-- <el-table-column prop="coursePicture" label="课程图片">
				<template slot-scope='scope'>
					<el-image style="width: 100px;
					height: 100px" :src="url+'download?filename='+scope.row.coursePicture"></el-image>
				</template>
			</el-table-column> -->
			<el-table-column label="操作">
				<template slot-scope='scope'>
					<el-link type="primary" @click="toDeletecourseEvaluation(scope.row.courseEvaluationId)">删除评价</el-link>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页区域 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryInfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>
	</div>
</template>

<script>
	import {
		url
	} from '../../util/tool.js'
	export default {
		data() {
			return {

				url: '', // 定义一个全局的url
				// 查询信息对象
				queryInfo: {
					evaluateContent: '',
					pageNum: 1,
					pageSize: 10
				},
				total: 0,
				courseEvaluationList: [],
				coursees:[],
				users:[]
			}
		},
		methods: {
			// 查询所有课程信息
			queryCourseType(){
				this.$http.get('course/findAll').then(res=>{
					this.courseTypeList = res.data.data
					for(var i=0;i<res.data.data.length;i++){
						this.$set(this.coursees, res.data.data[i].courseId,res.data.data[i].courseName);
						}
				})
			},
			// 查询所有评价人信息
			queryUser(){
				this.$http.get('user/findAll').then(res=>{
					for(var i=0;i<res.data.data.length;i++){
						this.$set(this.users, res.data.data[i].userId,res.data.data[i].userName);
						}
				})
			},
			
			//	去删除课程评价内容
			toDeletecourseEvaluation(courseEvaluationId) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						this.$http.delete('courseEvaluation/' + courseEvaluationId)
							.then(res => {
								if (res.data.status == 200) {
									this.$message.success("删除成功")
									this.queryList()
								} else {
									this.$message.error("删除失败")
								}
							})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						})
					})
			},

			
			// 分页查询所有的数据
			queryList() {
				//	调用后端接口
				this.$http.get('courseEvaluation/findByPage', {
						params: this.queryInfo
					})
					.then(res => {
						if (res.data.status == 200) {
							console.log(res);
							this.courseEvaluationList = res.data.data.list
							this.total = res.data.data.total
						} else {

						}
					})
			},
			handleSizeChange(size) {
				// console.log('每页显示数量发生改变');
				this.queryInfo.pageSize = size
				this.queryInfo.pageNum = 1
				this.queryList()
			},
			handleCurrentChange(num) {
				// console.log('页码发生改变');
				this.queryInfo.pageNum = num
				this.queryList()
			}
		},
		mounted() {
			this.queryList()
			this.queryCourseType()
			this.queryUser()
			// 动态的获取tool.js中的url，并赋值给当前组件的全局url
			this.url = url;
		}
	}
</script>
<style>
	/**设置富文本编辑器的最小高度，注意style中不能使用scoped **/
	.ql-container {
		min-height: 200px;
	}

	.el-breadcrumb {
		margin-bottom: 15px;
		padding: 0 0 15px;
		border-bottom: 1px solid #ddd;
	}

	.el-pagination {
		margin-top: 15px;
	}

	.el-link {
		padding: 0 5px;
	}
</style>